﻿<phone:PhoneApplicationPage 
    x:Class="ChatTextBlockControlSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:ctb="clr-namespace:ChatTextBlockControl;assembly=ChatTextBlockControl"
    xmlns:util="clr-namespace:ChatTextBlockControlSample.Util"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <UserControl.Resources>
        <util:UIVisibilityConverter x:Key="visibilityConverter"/>
        <util:UIHorizontalAlignmentConverter x:Key="horizontalAlignmentConverter"/>
    </UserControl.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
 
        <!--Panorama control-->
        <controls:Panorama Title="my application">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="PanoramaBackground.png"/>
            </controls:Panorama.Background>
 
            <!--Panorama item one-->
            <controls:PanoramaItem Header="first item">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="100"/>
                    </Grid.RowDefinitions>
                    <ListBox Grid.Row="0" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Width="411">
                                    <TextBlock Text="{Binding LineOne}" Margin="11,0,0,0"/>
                                    <ctb:ChatTextBlock
                                        TimestampText="{Binding Timestamp}"
                                        TopLeftArrowVisibility="Visible" Margin="10,0,0,10"
                                        HorizontalAlignment="Left">
                                        <ctb:ChatTextBlock.Content>
                                            <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap"/>
                                        </ctb:ChatTextBlock.Content>
                                    </ctb:ChatTextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    <ctb:ChatTextBlock
                        x:Name="txtChat"
                        Grid.Row="1"
                        BottomRightArrowVisibility="Visible"
                        Margin="0,5,9,0"
                        ContentMargin="0"
                        TimestampVisibility="Collapsed"
                        Background="White">
                        <ctb:ChatTextBlock.Content>
                            <TextBox Margin="-12" Width="433"/>
                        </ctb:ChatTextBlock.Content>
                    </ctb:ChatTextBlock>
                </Grid>
            </controls:PanoramaItem>
 
            <!--Panorama item two-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem Header="second item">
                <!--Double line list with image placeholder and text wrapping-->
                <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Width="411">
                                <TextBlock Text="{Binding LineOne}" Margin="11,0,0,0"/>
                                <ctb:ChatTextBlock
                                    Margin="0,0,0,10"
                                    TimestampText="{Binding Timestamp}"
                                    TopLeftArrowVisibility="{Binding IsResponse, Converter={StaticResource visibilityConverter}}"
                                    BottomRightArrowVisibility="{Binding IsResponse, Converter={StaticResource visibilityConverter}, ConverterParameter='Inverse'}"
                                    HorizontalAlignment="{Binding IsResponse, Converter={StaticResource horizontalAlignmentConverter}}">
                                    <ctb:ChatTextBlock.Content>
                                        <StackPanel>
                                            <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap"/>
                                            <Rectangle Height="100" Width="100" Fill="Magenta" Margin="12,0,9,0"/>
                                            <TextBlock Text="{Binding LineThree}" TextWrapping="Wrap"/>
                                        </StackPanel>
                                    </ctb:ChatTextBlock.Content>
                                </ctb:ChatTextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>
</phone:PhoneApplicationPage>